<template>
  <div>
    <div class="search_form">
			<div>
        <el-input v-model="searchForm.orderNo" size="mini" class="others" placeholder="订单编号" clearable></el-input>
				<el-select
					size="mini"
					clearable
					placeholder="请选择客户"
					v-model="searchForm.customerId"
					class="others"
					popper-class="selectClass"
				>
					<el-option v-for="(item, index) in cusList" :key="index" :label="item.customerName" :value="item.customerId"></el-option>
				</el-select>
				<el-select
					size="mini"
					clearable
					placeholder="选择树种"
					v-model="searchForm.treeSpeciesCode"
					class="others"
				>
                  <el-option v-for="item in cargoList" :key="item.dictValue" :label="item.dictLabel"
                             :value="item.dictValue"></el-option>
				</el-select>

				<el-button class="search_btn" type="primary" icon="el-icon-search" size="mini" @click="searchData">查询</el-button>
				<el-button icon="el-icon-refresh-right" size="mini" @click="resetSearch">重置</el-button>
			</div>
      <div>
        <el-button size="mini" icon="el-icon-plus" @click="add" type="primary" v-hasPermi="['businessManagement:tBusDryOrder:insert']">新增</el-button>
        <el-button v-hasPermi="['businessManagement:tBusDryOrder:updatestatus']" size="mini" icon="el-icon-s-check" type="primary" @click="auditStatus">审核</el-button>
      </div>
    </div>
    <!-- 主列表table -->
    <BaseTable :loading="loading" :data="tableData" :columns="columns" :tableHeight="tableHeight" @details="getSelectRow" :pagination="queryall" @size-change="sizeChange" @current-change="pageChange">
      <el-table-column
          fixed="right"
          align="center"
          label="操作"
          slot="operationColumn"
          width="220px">
        <template slot-scope="scope">
          <el-button
              size="mini"
              title="编辑"
              v-hasPermi="['metaDataManagement:Customer:customerUpdate']"
              @click.stop="handleEdit(scope.row)"><span style="color:#0B6CD6"><i class='iconfont icon-1-07'></i>编辑</span></el-button>
          
            <el-button
              size="mini"
              title="删除"
              v-hasPermi="['metaDataManagement:Customer:customerDelete']"
              @click.stop="handlerDelete(scope.row.id)"><span style="color:#F75E5E"><i class='iconfont icon-1-08'></i>删除</span></el-button>
        </template>
      </el-table-column>
    </BaseTable>
    <el-drawer
      title="详情"
      :visible.sync="isShow"
      direction="rtl"
      size="80%">
      <el-form :model="form" ref="basisRulesRef" style="padding:10px 10px;" :rules="rules" label-position="top">
        <div class="titleclass">
          <span style="margin-left: 18px">烘干业务订单</span>
          <div style="display: flex;margin-left:168px;margin-top:-45px">
            <el-form-item prop="companyId">
              <el-select v-model="form.companyId" size="small" placeholder="请选择组织" v-selecttext="form.companyName,companyList,'companyId'">
                <el-option v-for="item in companyList" 
                  :key="item.companyId" 
                  :label="item.companyName" 
                  :value="item.companyId"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <el-row>
          <el-col :span="8">
            <el-form-item label="订单编号" prop="orderNo">
              <el-input v-model="form.orderNo" size="mini"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="客户名称" prop="customerId">
              <el-select
				      	size="mini"
				      	clearable
				      	placeholder="选择客户名称"
				      	v-model="form.customerId"
                v-selecttext="form.customerName,cusList,'customerId'"
				      	class="others"
                style="width: 100%"
				      >
				      	<el-option v-for="item in cusList" :key="item.customerId" :label="item.customerName" :value="item.customerId" />
				      </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人" prop="contacts">
              <el-input v-model="form.contacts" size="mini"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话">
              <el-input v-model="form.contactNumber" size="mini"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="titleclass2">
          <span style="margin-left: 18px">货物信息</span>
          <div>

          </div>
          <div style="display: flex;float: right;margin-top: -38px;margin-right: 30px;">
            <el-button size="mini" type="primary" @click="addCargo">添加</el-button>
          </div>
        </div>

         <!-- <el-form :model="form" ref="basisRulesRef" size="small" :rules="rules"> -->
           <el-table height="150" :data="form.cargoInfoList" border @row-click="seletableclick" style="width: 100%;">
             <el-table-column label="树种" width="130">
               <template slot-scope="scope">
                 <el-form-item label="" style="padding-right: 1px" :prop="'cargoInfoList.'+scope.$index+'.treeSpeciesCode'" :rules="rules.treeSpeciesCode">
                   <el-select v-model="scope.row.treeSpeciesCode" @change="seleCargoName(scope.$index,scope.row.treeSpeciesCode)">
                     <el-option v-for="item in cargoList" :key="item.dictValue" :label="item.dictLabel"
                                :value="item.dictValue"></el-option>
                   </el-select>
                 </el-form-item>
               </template>
             </el-table-column>
             <el-table-column label="烘干类型" width="100">
               <template slot-scope="scope">
                 <el-form-item label="" style="padding-right: 1px" :prop="'cargoInfoList.'+scope.$index+'.dryType'" :rules="rules.dryType">
                   <el-select v-model="scope.row.dryType" >
                     <el-option v-for="item in dryingTypeList" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                   </el-select>
                 </el-form-item>
               </template>
             </el-table-column>
             <el-table-column label="长">
               <template slot-scope="scope">
                 <el-form-item style="padding-right: 1px" :prop="'cargoInfoList.'+scope.$index+'.cargoLength'" :rules="rules.cargoLength">
                   <el-input v-model="scope.row.cargoLength"></el-input>
                 </el-form-item>
               </template>
             </el-table-column>
             <el-table-column label="宽">
               <template slot-scope="scope">
                 <el-form-item style="padding-right: 1px" :prop="'cargoInfoList.'+scope.$index+'.cargoWidth'" :rules="rules.cargoWidth">
                   <el-input v-model="scope.row.cargoWidth"></el-input>
                 </el-form-item>
               </template>
             </el-table-column>
             <el-table-column label="厚">
               <template slot-scope="scope">
                 <el-form-item style="padding-right: 1px" :prop="'cargoInfoList.'+scope.$index+'.cargoHeight'" :rules="rules.cargoHeight">
                   <el-input v-model="scope.row.cargoHeight"></el-input>
                 </el-form-item>
               </template>
             </el-table-column>
             <el-table-column label="预计件数">
               <template slot-scope="scope">
                 <el-form-item style="padding-right: 1px" :prop="'cargoInfoList.'+scope.$index+'.quantity'" :rules="rules.quantity">
                   <el-input v-model="scope.row.quantity"></el-input>
                 </el-form-item>
               </template>
             </el-table-column>
             <el-table-column label="预计包数">
               <template slot-scope="scope">
                 <el-form-item style="padding-right: 1px" :prop="'cargoInfoList.'+scope.$index+'.packages'" :rules="rules.packages">
                   <el-input v-model="scope.row.packages"></el-input>
                 </el-form-item>
               </template>
             </el-table-column>
             <el-table-column label="预计方量" width="120">
               <template slot-scope="scope">
                 <el-form-item style="padding-right: 1px" :prop="'cargoInfoList.'+scope.$index+'.volume'" :rules="rules.volume">
                   <el-input v-model="scope.row.volume"></el-input>
                 </el-form-item>
               </template>
             </el-table-column>
             <el-table-column label="预计到货时间" width="150">
               <template slot-scope="scope">
                 <el-form-item style="padding-right: 1px" :prop="'cargoInfoList.'+scope.$index+'.arrivalDate'" :rules="rules.arrivalDate">
                   <el-date-picker
                      v-model="scope.row.arrivalDate"
                      type="date"
                      style="width: 100%"
                      value-format="yyyy-MM-dd"
                      format="yyyy-MM-dd"
                      placeholder="选择日期">
                   </el-date-picker>
                 </el-form-item>
               </template>
             </el-table-column>
             <el-table-column label="要求含水率" width="120">
               <template slot-scope="scope">
                 <el-form-item style="padding-right: 1px" :prop="'cargoInfoList.'+scope.$index+'.waterContent'" :rules="rules.waterContent">
                   <el-input v-model="scope.row.waterContent"></el-input>
                 </el-form-item>
               </template>
             </el-table-column>
             <el-table-column label="批次">
               <template slot-scope="scope">
                 <el-form-item style="padding-right: 1px" :prop="'cargoInfoList.'+scope.$index+'.batch'" :rules="rules.batch">
                   <el-input v-model="scope.row.batch"></el-input>
                 </el-form-item>
               </template>
             </el-table-column>
             <el-table-column>
               <template slot-scope="scope">
                 <el-button type="text" @click="deleteCargoInfo(scope.$index)">删除</el-button>
               </template>
             </el-table-column>
           </el-table>
         <!-- </el-form> -->


        <div class="titleclass2">
          <span style="margin-left: 18px">劳务需求</span>
        </div>
        <el-row>
          <el-col :span="16">
            <el-form-item label="需求">
              <el-checkbox-group v-model="checkedDemand" @change="checkChange">
                <el-checkbox
                  v-for="(val, index) in labourDemandList"
                  :label="val.dictValue"
                  :key="index"
                >{{ val.dictLabel }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="备注">
              <el-input type="textarea" row="2" v-model="form.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="demo-drawer__footer">
        <el-button
          v-if="isAudit != '1'"
          size="small"
          type="primary"
          @click="addUpdate()"
        >保 存</el-button>
        <el-button
          v-if="isAudit == '1'"
          size="small"
          type="primary"
          @click="auditOrder"
        >审 核</el-button>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import BaseTable from '@/components/BaseTable'
import publicapi from '@/api/public/index'
import api from '@/api/Business/dryingOrder/index'
  export default{
    components: { BaseTable },
    data () {
      return{
        menuArr: [],
        // 搜索表单
        searchForm: {
          orderNo: '',
          treeSpeciesCode: '',
          customerId: '',
        },
        cusList: [],// 客户list
        cargoList: [], // 货名list
        dryingTypeList:[
          {
            value: 1,
            label: '半干材'
          }, {
            value: 2,
            label: '湿材'
          },
        ],
        loading: false,
        tableData: [],
        columns: [
          {
            prop: 'orderNo',
            label: '订单编号'
          },
          {
            prop: 'customerName',
            label: '客户名称',
            isShort: true,
          },
          {
            prop: 'contacts',
            label: '联系人'
          },
          {
            prop: 'contactNumber',
            label: '联系电话'
          },
          {
            prop: 'treeSpeciesName',
            label: '树种'
          },
          {
            prop: 'quantity',
            label: '计划件数'
          },
          {
            prop: 'packages',
            label: '计划包数'
          },
          {
            prop: 'volume',
            label: '计划方数'
          },
          {
            prop: 'status',
            label: '状态',
            render(h, params) {
            if (params.row.status == '1') {
              return h('el-tag', {
                props: {
                  size: 'mini'
                },
                domProps: {
                  innerHTML: '未审核'
                }
              })
            } else if (params.row.status == '2') {
              return h('el-tag', {
              props: {
                size: 'mini',
                type: 'warning'
              },
              domProps: {
                innerHTML: '已审核'
              }
            })
            } else if (params.row.status == '3') {
              return h('el-tag', {
              props: {
                size: 'mini',
                type: 'danger'
              },
              domProps: {
                innerHTML: '作业中'
              }
            })
            } else if (params.row.status == '4') {
              return h('el-tag', {
              props: {
                size: 'mini',
                type: 'success'
              },
              domProps: {
                innerHTML: '已结算'
              }
            })
            }
          }
          },
          {
            prop: 'createName',
            label: '创建人',
          },
          {
            prop: 'createTime',
            label: '创建时间',
          }
          // {
          //   label: '操作',
          //   fixed: 'right',
          //   align: 'center',
          //   width: '180',
          //   render: (h, params) => {
          //     return h(
          //       'div',
          //       {
          //         class: 'btnClass'
          //       },
          //       [
          //         h('el-button', {
          //           props: {
          //             size: 'mini'
          //           },

          //           domProps: {
          //             // 添加标签,使用自己引入的iconfont图标
          //             innerHTML:
          //               "<span style='color:#0B6CD6'><i class='iconfont icon-1-07'></i><span  style='padding-left:5px;'>编辑</span></span>"
          //           },
          //           on: {
          //             click: () => {
          //               this.handleEdit(params.row)
          //             }
          //           }
          //         }),
          //         h('el-button', {
          //           props: {
          //             size: 'mini'
          //           },
          //           style: {
          //             marginRight: '10px'
          //           },
          //           domProps: {
          //             // 添加标签,使用自己引入的iconfont图标
          //             innerHTML:
          //               `<span style='color:#f75e5e;'><i class='iconfont icon-1-08'></i><span  style='padding-left:5px;'>删除</span></span>`

          //           },
          //           on: {
          //             click: () => {
          //               this.handlerDelete(params.row.id)
          //             }
          //           }
          //         })
          //       ]
          //     )
          //   }
          // }
        ],
        tableHeight: window.innerHeight - 200,
        // 页码
        queryall: {
          totalNum: 0,
          startpage: 1,
          pagesize: 15
        },
        isShow: false,
        form: {
          companyId: '',
          companyName: '',
          customerId: '',
          customerName: '',
          orderNo: '',
          contacts: '',
          remark: '',
          contactNumber: '',
          cargoInfoList: [],
        },
        rules: {
          'companyId': [{ required: true, message: '请选择组织', trigger: 'change' }],
          'orderNo': [{ required: true, message: '请填写', trigger: 'blur' }],
          'customerId': [{ required: true, message: '请选择', trigger: 'change' }],
          'contacts': [{ required: true, message: '请填写', trigger: 'blur' }],
          'treeSpeciesCode': [{ required: true, message: '请选择', trigger: 'change' }],
          'dryType': [{ required: true, message: '请选择', trigger: 'change' }],
          'cargoLength': [{ required: true, message: '请填写', trigger: 'blur' }],
          'cargoWidth': [{ required: true, message: '请填写', trigger: 'blur' }],
          'cargoHeight': [{ required: true, message: '请填写', trigger: 'blur' }],
          'quantity': [{ required: true, message: '请填写', trigger: 'blur' }],
          'packages': [{ required: true, message: '请填写', trigger: 'blur' }],
          'volume': [{ required: true, message: '请填写', trigger: 'blur' }],
          'arrivalDate': [{ required: true, required: true, message: '请选择日期', trigger: 'change' }],
          'waterContent': [{ required: true, message: '请填写', trigger: 'blur' }],
          'batch': [{ required: true, message: '请填写', trigger: 'blur' }],
        },
        companyList: [], // 公司
        selectInfo: null, // 主列表行数据
        labourDemandList: [], // 劳务需求
        checkedDemand: [], // 选中的劳务需求
        isAudit: '', // 是否审核
      }
    },
    activated () {
      var menuArr = []
      var menuId = ''
      if (localStorage.getItem('menuArr')) {
        menuArr = JSON.parse(localStorage.getItem('menuArr'))
      }
      menuArr.map(item => {
        item.children.map(v => {
          if (window.location.href.includes(v.url)) {
            menuId = v.id
          }
        })
      })

      if (menuId) {
        this.menuArr = []
        publicapi.getPermissionsBtn(menuId)
          .then(res => {
            res.data.data.map(item => {
              this.menuArr.push(item.RESOURCENAME)
            })
          }).catch((error) => {})
      }
      if (this.$store.state.app.searchResouce == 'menu') {
        this.queryAll = {
          companyName: '',
          startpage: 1,
         pagesize: 10
        }
      }
      this.getCustomer()
      this.getListTreeType()
      this.getCompanyList()
      this.getDictData()
      // this.searchData()
    },
    methods: {
      // 获取客户下拉框
      getCustomer () {
        publicapi.getlistCustomer().then(res => {
          this.cusList = res.data.data
        })
      },

      //获取字典树种
      getListTreeType() {
        publicapi.getDictData('TREETYPE').then(res => {
          this.cargoList = res.data.data.TREETYPE
        })
      },
      // 获取字典数据
      getDictData () {
        publicapi.getDictData('DEMAND').then(res => {
          this.labourDemandList = res.data.data.DEMAND
        })
      },
      // 获取组织
      getCompanyList () {
        publicapi.getListComp().then(res => {
          this.companyList = res.data.data
        })
      },
      // 重置
      resetSearch () {
        this.searchForm = {
          rderNo: '',
          treeSpeciesCode: '',
          customerId: '',

        }
      },
      // 分页查询
      sizeChange(val) {
        this.queryall.pagesize = val;
        this.searchData();
      },
      // 分页查询
      pageChange(val) {
        this.queryall.startpage = val;
        this.searchData();
      },
      // 查询主列表数据
      searchData () {
        this.loading = true;
        let params = Object.assign({},this.queryall,this.searchForm)
        api.listPages(params).then(res => {
          this.loading = false;
          this.tableData = res.data.data.pages
          this.queryall.startpage = res.data.data.pageNum // 当前页
          this.queryall.pagesize = res.data.data.pageSize // 每页多少
          this.queryall.totalNum = res.data.data.totalNum
          this.selectInfo = null
        })
      },
      // 选中主列表行数据
      getSelectRow (val) {
        console.log(val)
        this.selectInfo = val
      },
      // 打开新增抽屉
      add () {
        this.form.id = ''
        this.form.companyId = ''
        this.form.companyName = ''
        this.form.customerId = ''
        this.form.customerName = ''
        this.form.orderNo = ''
        this.form.contacts = ''
        this.form.remark = ''
        this.form.contactNumber = ''
        this.form.cargoInfoList = []
        this.checkedDemand = []
        this.isAudit = ''
        this.isShow = true;
      },
      // 编辑按钮
      handleEdit (val) {
        this.form.id = val.id
        this.form.companyId = val.companyId
        this.form.companyName = val.companyName
        this.form.customerId = val.customerId
        this.form.customerName = val.customerName
        this.form.orderNo = val.orderNo
        this.form.contacts = val.contacts
        this.form.remark = val.remark
        this.form.contactNumber = val.contactNumber
        this.form.cargoInfoList = val.cargoInfoList
        if (val.demand) {
          this.checkedDemand = val.demand.split(',')
        }
        this.isAudit = ''
        this.isShow = true
      },
      // 删除按钮
      handlerDelete (id) {
        this.$confirm('将删除本条信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.deleteById(id).then(res => {
            this.searchData()
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 添加货物信息
      addCargo () {
        let data = {
          id: '',
          treeSpeciesCode: '',
          treeSpeciesName: '',
          cargoLength: '',
          cargoWidth: '',
          cargoHeight: '',
          quantity: '',
          packages: '',
          volume: '',
          arrivalDate: '',
          waterContent: '',
          batch: '',
          dryType:''
        }
        this.form.cargoInfoList.push(data)
      },
      // 删除选中给数据
      deleteCargoInfo (index) {
        this.form.cargoInfoList.splice(index,1)
      },
      // 选中一行表格数据
      seletableclick (val) {
        console.log(val);
      },
      // 新增/编辑
      addUpdate () {
        if (this.form.id) {
          this.updateById()
        } else {
          this.insert()
        }
      },
      // 选中复选框
      checkChange (val) {
        console.log(val)
      },
      // 对货名赋值
      seleCargoName (index,value) {
        console.log(index)
        console.log(value)
        this.form.cargoInfoList[index].treeSpeciesName = this.cargoList.filter(v => v.dictValue == value)[0].dictLabel
      },
      // 新增
      insert () {
        this.$refs['basisRulesRef'].validate((valid) => {
          if (!valid) {
            return false
          }
          let params = Object.assign({},this.form)

          if (this.checkedDemand.length > 0) {
            params.demand = this.checkedDemand.join(',')
          } else {
            return this.$message.error('请选择劳务类需求')
          }
          var quantity = 0,packages = 0,volume = 0
          this.form.cargoInfoList.forEach(v => {
            if (v.quantity) {
              quantity += Number(v.quantity)
            }
            if (v.packages) {
              packages += Number(v.packages)
            }
            if (v.volume) {
              volume += Number(v.volume)
            }
          })
          params.quantity = quantity
          params.packages = packages
          params.volume = volume

          api.insert(params).then(res => {
            this.$message.success('新增成功')
            this.isShow = false
            this.searchData()
          })
          })
      },
      // 编辑
      updateById () {
        this.$refs['basisRulesRef'].validate((valid) => {
          if (!valid) {
            return false
          }
          let params = Object.assign({},this.form)

          if (this.checkedDemand.length > 0) {
            params.demand = this.checkedDemand.join(',')
          } else {
            return this.$message.error('请选择劳务需求')
          }

          var quantity = 0,packages = 0,volume = 0
          this.form.cargoInfoList.forEach(v => {
            if (v.quantity) {
              quantity += Number(v.quantity)
            }
            if (v.packages) {
              packages += Number(v.packages)
            }
            if (v.volume) {
              volume += Number(v.volume)
            }
          })
          params.quantity = quantity
          params.packages = packages
          params.volume = volume
          params.isAudit = this.isAudit
          api.updatebyid(params).then(res => {
            this.$message.success('更新成功')
            this.isShow = false
            this.searchData()
          })
          })
      },
      // 更新状态
      auditStatus () {
        if (this.selectInfo == null) {
          return this.$message.info('请先选择一条数据')
        }
        let val = this.selectInfo
        this.form.id = val.id
        this.form.companyId = val.companyId
        this.form.companyName = val.companyName
        this.form.customerId = val.customerId
        this.form.customerName = val.customerName
        this.form.orderNo = val.orderNo
        this.form.contacts = val.contacts
        this.form.remark = val.remark
        this.form.contactNumber = val.contactNumber
        this.form.cargoInfoList = val.cargoInfoList
        if (val.demand) {
          this.checkedDemand = val.demand.split(',')
        }
        this.isAudit = '1'
        this.isShow = true
      },
      // 审核
      auditOrder () {
        let params = Object.assign({},this.form)

        if (this.checkedDemand.length > 0) {
          params.demand = this.checkedDemand.join(',')
        }

        var quantity = 0,packages = 0,volume = 0
        this.form.cargoInfoList.forEach(v => {
          if (v.quantity) {
            quantity += Number(v.quantity)
          }
          if (v.packages) {
            packages += Number(v.packages)
          }
          if (v.volume) {
            volume += Number(v.volume)
          }
        })
        params.quantity = quantity
        params.packages = packages
        params.volume = volume
        params.isAudit = this.isAudit
        api.updatebyid(params).then(res => {
          this.$message.success('审核成功')
          this.isShow = false
          this.searchData()
        })
      }
    }
  }
</script>
<style lang="less" scoped>
@import "../../../assets/searchfrom.less";
/deep/ .el-drawer__header {
  margin-bottom: 10px;
  padding: 16px;
  border-bottom: 1px solid gainsboro;
}
/deep/ .el-form-item {
  padding-right: 20px;
  .el-select {
    width:100%;
  }
}
.titleclass{
  background-color: rgb(247, 246, 246);
  height: 50px;
  width: 101%;
  margin-top: -10px;
  margin-left: -10px;
  line-height:50px;
}
.titleclass2{
  background-color: rgb(247, 246, 246);
  height: 50px;
  width: 101%;
  margin-left: -10px;
  line-height:50px;
}
/deep/ .el-drawer__body {
  overflow-y: auto;
  margin-bottom: 50px;
}
/deep/ .demo-drawer__footer {
  text-align: right;
  padding-right: 1rem;
  border-top: 1px solid #c8cfde;
  background-color: #f5f7fa;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 50px;
  z-index: 20;
}

/deep/  .el-form-item--small.el-form-item{
  margin-bottom: 0px;
}
.el-form-item{
  margin-bottom: 15px;
}
</style>